<style>
  #VIEW-login {
    height: 100%;
    background: #252834;
    padding-top: 1px;
    margin-top: -1px;
  }

  #VIEW-login .layui-logo {
    user-select: none;
    overflow: hidden;
    position: static;
    font-size: 30px;
    color: #d6e0f6;
    width: 100%;
    padding: 0;
    line-height: 120px;
    height: 120px;
    color: #3491ff;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    transition: height 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  #VIEW-login .layui-logo span {
    font-weight: normal;
    color: #fff;
    border-bottom: 1px solid #3491ff;
  }

  #VIEW-login .layui-logo span b {
    color: #3491ff;
  }

  #VIEW-login .login-wrap {
    position: relative;
    top: 50%;
    margin-top: -290px;
    height: 540px;
  }

  #VIEW-login .layui-form {
    overflow: hidden;
    background: #fff;
    padding: 40px;
    padding-bottom: 20px;
    border-radius: 0px;
    box-shadow: 0 0 30px #000;
    position: relative;
  }

  #VIEW-login .layui-form-item {
    position: relative;
  }

  #VIEW-login .verify-block {
    display: none;
  }

  #VIEW-login .layui-input {
    text-indent: 26px;
  }

  #VIEW-login .codeimg {
    margin-left: 10px;
    cursor: pointer;
  }

  #VIEW-login .sendsms {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 100px;
    border: none;
  }

  #VIEW-login .sendsms.layui-btn-disabled {
    background: #f4f4f4;
    color: #bbb;
  }

  #VIEW-login .houseimg {
    text-align: center;
  }

  #VIEW-login .houseimg img {
    display: inline-block;
    margin-top: 5%;
  }

  #VIEW-login .login-type-tab {
    margin-bottom: 20px;
    overflow: hidden;
  }

  #VIEW-login .login-type-tab li {
    display: inline-block;
    padding-right: 20px;
    font-size: 16px;
    line-height: 30px;
    color: #bbb;
    cursor: pointer;
    transition: color 0.5s ease;
  }

  #VIEW-login .login-type-tab li.active {
    color: #333;
  }

  #VIEW-login .login-type-tab li .qrcode-icon {
    font-size: 24px;
  }

  #VIEW-login .phonecode-block {
    display: none;
  }

  #VIEW-login .qrcode-block {
    text-align: center;
    display: none;
  }

  #VIEW-login .qrcode-block .qrcode {
    border: 1px solid #eee;
    display: inline-block;
    padding: 15px;
    margin: 30px 0;
    width: 158px;
    height: 158px;
  }

  #VIEW-login .qrcode-block .qrcode .layui-icon {
    line-height: 158px;
    font-size: 44px;
    color: #e6e6e6;
  }

  #VIEW-login .qrcode-block .p1 {
    font-size: 16px;
  }

  #VIEW-login .qrcode-block .p2 {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  #VIEW-login .layui-form-item .label-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    line-height: 38px;
    text-align: center;
    color: #d2d2d2 !important;
  }
</style>
<div id="VIEW-login" lay-title="登录">
  <div class="login-wrap">
    <div class="layui-container">
      <div class="layui-row">
        <div
          class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 nepadmin-tc"
        >
          <div class="layui-logo">
            <span>YZ<b>GY</b>-<b>OA</b>·<b>内网测试版</b></span>
          </div>
        </div>
        <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
          <div class="layui-form" lay-filter="login-form">
            <ul class="login-type-tab">
              <li login-type="password" class="active">密码登录</li>
            </ul>
            <div class="normal-login-form">
              <div class="layui-form-item">
                <label
                  class="layui-icon label-icon layui-icon-username"
                ></label>
                <input
                  type="text"
                  name="username"
                  lay-verify="required|username"
                  lay-verType="tips"
                  placeholder="用户名"
                  maxlength="20"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
              <div class="layui-form-item password-block">
                <label
                  class="layui-icon label-icon layui-icon-password"
                ></label>
                <input
                  type="password"
                  name="pass"
                  lay-verify="password"
                  lay-verType="tips"
                  placeholder="密码"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
              <div class="layui-form-item">
                <input
                  type="checkbox"
                  name="autoLogin"
                  title="记住用户名"
                  lay-skin="primary"
                  checked
                />
              </div>
              <div class="layui-form-item">
                <button
                  class="layui-btn layui-btn-normal layui-btn-fluid"
                  lay-submit
                  lay-filter="login-submit"
                >
                  <i
                    style="display: none;"
                    class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                  ></i>
                  立即登录
                </button>
              </div>
              <div class="layui-form-item nepadmin-tr">
                &nbsp;&nbsp;
                <a
                  style="margin-right: 10px;"
                  onclick="layer.alert('如忘记密码，请联系系统管理员重置用户密码')"
                  >忘记密码？</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div
          style="
            text-align: center;
            color: white;
            padding-top: 20px;
            line-height: 22px;
          "
        >
          重庆钰圳广越商贸有限公司 @企业运营管理平台<br />
          Copyright © 2019-2020 SCGAS. All Rights Reserved.
          <a href="http://beian.miit.gov.cn/" target="_blank"
            >渝ICP备xxxx号</a
          >
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(["admin", "helper", "util", "form", "md5", "conf"], function (
    admin,
    helper,
    util,
    form,
    md5,
    conf
  ) {
    var $ = layui.jquery;
    var view = $("#VIEW-login");
    var viewImgVerify = view.find(".codeimg");
    var viewImgVerifyBlock = view.find(".verify-block");
    var viewImgVerifyInput = viewImgVerifyBlock.find("[name=verifyCode]");
    var viewPhoneInput = view.find("[name=username]");
    var viewTabBtn = view.find(".login-type-tab li");
    var md5 = md5;
    var currentLoginType = "password";
    var QRExists = false;
    var btnDisabledCls = "layui-btn-disabled";
    var smsCountdown = false;

    form.render();

    //设置登录框用户名
    var userInfo = layui.data("remberUserName");
    if (userInfo != null && userInfo.name != undefined && userInfo.name != "") {
      form.val("login-form", {
        username: userInfo.name,
      });
    }

    if (currentLoginType !== "password") {
      viewTabBtn.each(function (i) {
        var elem = viewTabBtn.eq(i);
        if (elem.attr("login-type") === currentLoginType) elem.click();
      });
    }

    form.verify({
      password: function (value, el) {
        if (currentLoginType == "password" && value.length < 6)
          return "登录密码不能少于 6 位";
      },
      username: function (value, el) {
        if (value.length < 1) return "用户名长度不得小于 1 位";
      },
    });

    //提交登录表单
    form.on("submit(login-submit)", function (data) {
      var loading = $(this).find(".layui-icon");
      if (loading.is(":visible")) return;
      loading.show();

      admin.post({
        api: "login",
        data: {
          userName: data.field.username,
          psw: md5(md5(data.field.pass) + "scgngms0.01"),
        },
        success: function (res) {
          layer.msg("登录成功！", { icon: 1 });
          setTimeout(function(){
            if (res.success && res.code == 2000) {
              admin.login(
                      res.data.token,
                      {
                        user: res.data.user,
                        perms: res.data.perms
                      },
                      false
              );
              //保存登录成功的用户名用户名
              layui.data("remberUserName", {
                key: "name",
                value: data.field.autoLogin == "on" ? data.field.username : "",
              });
              admin.navigate("/");
            }
          },500);
        },
        error: function (res) {
          loading.hide();
          if (res.responseJSON == null) {
            layer.msg("请求服务器出错");
          }
        },
      });
      return false;
    });
  });
</script>
